<!-- eslint-disable no-undef -->
<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import * as echarts from 'echarts'
// const { proxy } = getCurrentInstance()

const isNull = ref(false)
const tableDataX = ref([])
const tableDataY = ref([])
const route = useRoute()
const studentId = route.query.studentId

onMounted(() => {
  score()
})
const score = () => {
  axios.get('api/scorecontroller/score2/' + studentId).then(res => {
    const rootData = res.data
    console.log(rootData)
    rootData.forEach((element, index) => {
      tableDataX.value.push(`第${index + 1}次`)

      tableDataY.value.push(element.etScore)
    })
    const scoreCharts = echarts.init(document.getElementById('box'))
    const option = {
      xAxis: {
        type: 'category',
        data: tableDataX.value
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: tableDataY.value,
          type: 'line',
          itemStyle: { normal: { label: { show: true } } }
        }
      ]
    }
    scoreCharts.setOption(option)
    scoreCharts.on('mouseover', params => {
      console.log(params.value)
    })
  })
}

</script>

<template>
 <div id="grade">
    <div  id="box"></div>
    <div class="notFound" v-if="isNull">
      <i class="iconfont icon-LC_icon_tips_fill"></i><span>该考生未参加考试</span>
    </div>
  </div>
</template>

<style lang="less" scoped>
#grade {
  position: relative;
  #box{
    width: 600px;
    height: 400px;
  }
  .notFound {
    position: absolute;
    top: 0px;
    left: 0px;
  }
}
</style>
